import style from './comments.module.scss'
import {SelectOutlined, MessageOutlined, PropertySafetyOutlined} from '@ant-design/icons';
import TimeFilter from '../../util/TimeFilter'
import Edit from "../Emoji/Emoji";
import {useEffect, useRef, useState} from "react";
import store from "../../redux/store";
import {AddFirstComment, AddSecondComment, GetArticleList} from "../../service/article";
import {GetArticleInfo} from "../../service/article";
export default function Comments(prop: any) {
    let [showCom, setShowCom] = useState<number>()
    let [Mr, setMr] = useState<number>()
    let showComRef = useRef(showCom)
    let [critics, setCritics] = useState<string[]>()
    let criticsRef=useRef(critics)
    criticsRef.current=critics
    let [long,setLong]=useState<number>(prop.article.comment.length)
    showComRef.current = showCom
    useEffect(() => {
        store.subscribe(() => {
            setShowCom(store.getState().article_id)
        })
    }, [showCom,long])
    return (
        <div>
            {/*    顶部头像*/}
            <div className={style.head_top}>
                <img className={style.headImg}
                     src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3793/3131589739~300x300.image" alt=""/>
                <div>
                    <div className={style.head_userName}>{prop.article.nick_name}</div>
                    <div className={style.head_userInfo}>
                        <div>{TimeFilter(new Date(prop.article.created_at * 1000))}</div>
                    </div>
                </div>
            </div>
            {/*    内容区*/}
            <div className={style.content}>
                <div className={style.content_text} dangerouslySetInnerHTML={{__html: prop.article.info}}/>
            </div>
            {/*    下方图片*/}
            <div className={style.footer}>
                <div className={style.footer_item}>
                    <SelectOutlined/>
                    <div>分享</div>
                </div>
                <div className={style.footer_item} onClick={() => {
                    openPin(prop.article)
                }}>
                    <div className={showCom === prop.article.article_id?style.firstZan_active:style.firstZan}>
                        <MessageOutlined/>
                        <div>{long}</div>
                    </div>
                </div>
                <div className={style.footer_item}>
                    <PropertySafetyOutlined/>
                    <div>{prop.article.comment_num}</div>
                </div>
            </div>
            {/*    评论区*/}

            {
                commentsSection()
            }
        </div>
    )
    /**
     * 展开评论
     *
     */
    function openPin(peo: any) {
        if(showCom === prop.article.article_id){
            store.dispatch({
                type: "change",
                Value: 0
            })
            return
        }
        GetArticleInfo({
            article_id:prop.article.article_id
        }).then((res:any)=>{
            console.log(res)
            if(res.code===2000){
                setLong(res.data.data.length)
                setCritics(res.data.data)
                store.dispatch({
                    type: "change",
                    Value: peo.article_id
                })
            }
        })
    }
    /**
     * 展开沸点评论的回复
     */
    function response(id:number) {
        if(Mr===id){
           setMr(0)
        }else {
            setMr(id)
        }
    }
    /**
     * 展开评论区的dom
     */
    function commentsSection() {
        if (showCom === prop.article.article_id) {
            return (
                <div>
                    {/*顶上*/}
                    <div style={{display: "flex", padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.2)"}}>
                        <div><img className={style.pinglun_icon}
                                  src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3793/3131589739~300x300.image"
                                  alt=""/>
                        </div>
                        <Edit width={600} inputValue={firstCom}/>
                    </div>
                    {/*    评论*/}
                    <div>
                        {
                            critics&&critics.length>0 &&  <div style={{display:"flex",justifyContent:"space-between",margin: "20px 0",}}>
                                <div style={{ fontSize: "18px"}}>全部评论{critics.length}</div>
                                <div style={{fontSize:"15px"}}>
                                    <span style={{paddingRight:"20px",color:"#1e80ff",borderRight:"1px solid rgba(0,0,0,0.2)"}}>最新</span>
                                    <span style={{paddingLeft:"20px"}}>最热</span>
                                </div>
                            </div>
                        }
                        {/*    每条评论*/}
                        {
                         critics&&critics!.map((item:any)=>{
                                return(
                                    <div className={style.ConmentList} key={item.comment_id}>
                                        <div><img className={style.pinglun_icon}
                                                  src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3793/3131589739~300x300.image"/>
                                        </div>
                                        <div style={{flex:"1"}}>
                                            <div>
                                                <span>{item.nick_name}</span>
                                                <span style={{marginLeft:"5px",display:"inline-block"}}>{TimeFilter(new Date(item.created_at*1000))}</span>
                                            </div>
                                            <div style={{margin:"10px 0"}}>{item.comment_info}</div>
                                            <div className={style.icon}>
                                                <div>点赞</div>
                                                {
                                                    Mr===item.comment_id?<div onClick={() => {
                                                        response(item.comment_id)
                                                    }} style={{color:"#1890ff"}}>取消回复
                                                    </div>:<div onClick={() => {
                                                        response(item.comment_id)
                                                    }}>回复
                                                    </div>
                                                }

                                            </div>
                                            {
                                                item.comment_id===Mr?<Edit inputValue={(value:any)=>{secondCom(value,item.comment_id)}}/>:null
                                            }
                                            {
                                                secondaryComments(item.child)
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        } else {
            return null
        }
    }
    /**
     * 二级评论
     */
    function secondaryComments(Arr:string[]){
            if(Arr.length>0){
                return(
                    Arr.map((item:any)=>{
                        return (
                            <div className={style.sendList} key={item.comment_id}>
                                <div>
                                    <img
                                        style={{width:"25px",height:"25px",borderRadius:"50%",marginRight:"10px"}}
                                        src="https://p26-passport.byteacctimg.com/img/user-avatar/f85b6ec6fbce9c3479522cea9e90c5ad~300x300.image" alt=""/>
                                </div>
                                <div>
                                    <div>
                                        <span>{item.nick_name}</span>
                                        <span style={{marginLeft:"5px",display:"inline-block"}}>{TimeFilter(new Date(item.created_at*1000))}</span>
                                    </div>
                                    <div>{item.comment_info}</div>
                                </div>
                            </div>
                        )
                    })
                )
            }
    }
    /**
     * 一级评论发送
     */
    function firstCom(value:any){
        AddFirstComment({
            token:sessionStorage.getItem("token"),
            comment_info:value.value,
            article_id:prop.article.article_id
        }).then((res:any)=>{
            if(res.code===2000){
                // openPin(prop.article)
                GetArticleInfo({
                    article_id:prop.article.article_id
                }).then((res:any)=>{
                    console.log(res)
                    if(res.code===2000){
                        setCritics(res.data.data)
                        // prop.initData()
                        setLong( criticsRef.current!.length+1)
                    }
                })
            }
        })
    }
    /**
     * 二级评论发送
     */
    function secondCom(value:any,id:number){
        console.log(value,id)
        AddSecondComment({
            token:sessionStorage.getItem("token"),
            comment_info:value.value,
            article_id:prop.article.article_id,
            father_id:id
        }).then((res:any)=>{
            if(res.code===2000){
                GetArticleInfo({
                    article_id:prop.article.article_id
                }).then((res:any)=>{
                    if(res.code===2000){
                        setCritics(res.data.data)
                        // prop.initData()
                    }
                })
            }
        })
    }

}
